
<!-- Dom模板 -->
<template>
  <div>
    <!-- Dom内容 -->
    <div style="position: relative">
      <div class="greyBox"></div>
      <div class="payBox">
        <div class="payMain">
          <div>您当前的余额不足，是否充值</div>
          <div class="btnList">
            <button @click="topUpAlert()">确定</button>
            <button @click="payClose()">返回</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  data() {
    return {
      msg: "测试",
      nowIndex: 0,
      payList: [
        {
          coupon: 100,
          price: 10,
        },
        {
          coupon: 200,
          price: 20,
        },
        {
          coupon: 500,
          price: 50,
        },
      ],
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // Vue方法定义
  methods: {
    payClose() {
      this.$store.commit("bags/componentPath", "pay");
    },
    liClick(index) {
      this.nowIndex = index;
    },
    topUpAlert() {
      this.$store.commit("bags/componentPath", "topup");
    },
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
@import url("../../../static/fonts/iconfont.css");
/* 弹窗 */
.greyBox {
  background-color: rgba(0, 0, 0, 0.4);
  width: 100vw;
  height: 100vh;
}
.payBox {
  position: absolute;
  background-color: white;
  width: 100vw;
  padding: 0px 0 20px;
  font-family: PingFangSC-regular;
  bottom: 0;
}
.payMain {
  padding: 0 15px;
}
.payMain > div:nth-child(1) {
  font-size: 17px;
  line-height: 50px;
}
.btnList{
    display: flex;
    justify-content: space-between;
}
.btnList > button:nth-child(1) {
  width: 150px;
  outline: none;
  border: none;
  font-size: 16px;
   border-radius:30px;
   line-height: 35px;
  background-color: rgb(248, 164, 53);
}
.btnList > button:nth-child(2) {
  width: 150px;
  line-height: 35px;
  outline: none;
  border: none;
  border-radius:30px;
  font-size: 16px;
  margin-right:20px;
  background-color: rgb(226, 222, 217);
}
</style>